const {join} = require('path')
// 1. 配置自动清理插件（在打包的时候，插件就会自动清理 dist 中没用的文件）
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');
module.exports = {
    mode:'development',
    //入口文件
    entry:join(__dirname,'src','index.js'),
    output:{
        path:join(__dirname,'dist'),
        filename: 'js/bundle.js', // 这里加入 js 文件夹。
        assetModuleFilename: 'images/[hash:8][ext]' // 配置文件（图片）的输出路径
    },
    plugins: [ 
        new CleanWebpackPlugin(),
        new HtmlPlugin({
            template: join(__dirname, 'public', 'index.html'), // public中，你的html叫什么
            filename: 'index.html' // 打包后的html叫什么（这个文件会生成到dist文件夹）
          })
      ],
      devServer: {
        // port: 9000, // 实时打包所用的端口号
        open: true // 初次打包完成后，自动打开浏览器
      },
      module: {
        rules: [
          // 处理css文件
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },
          { test: /\.html$/, use: 'html-loader' },
          {
            test: /\.(jpg|png|gif)$/,
            type: 'asset',
            parser: {
              dataUrlCondition: {
                maxSize: 12000, // 图片超过这个大小，使用原图片，否则使用base64字符串
              }
            }
          },
          { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

        ]
    }
}